<template>
  <div class="app-container">
    <el-form
      ref="elForm"
      :model="formData"
      :disabled="$route.query.isInfo"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <h2 style="text-align: center">办公用品信息</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <!-- <el-col :span="12">
          <el-form-item label="用品编码" prop="goodsNo">
            <el-input
              v-model="formData.goodsNo"
              placeholder="请输入单行文本用品编码"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>-->
        <el-col :span="12">
          <el-form-item label="用品名称" prop="goodsName">
            <el-input
              v-model="formData.goodsName"
              placeholder="请输入用品名称"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用品分类" prop="typeValue">
            <el-select
              v-model="formData.typeValue"
              placeholder="请选择用品分类"
              filterable
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in dict.type.sys_goods_type"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位" prop="unit">
            <el-select
              v-model="formData.unit"
              placeholder="请选择单位"
              filterable
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in dict.type.sys_goods_unit"
                :key="index"
                :label="item.label"
                :value="item.label"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格" prop="spec">
            <el-select
              v-model="formData.spec"
              placeholder="请选择规格"
              filterable
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in dict.type.sys_goods_spec"
                :key="index"
                :label="item.label"
                :value="item.label"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="当前库存" prop="currentInventory">
            <el-input-number
              v-model="formData.currentInventory"
              placeholder="当前库存"
              :step="1"
              controls-position="right"
              :style="{ width: '100%' }"
            ></el-input-number>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="单价(元)" label-width="120px" prop="price">
            <el-input placeholder="请输入单价" v-model="formData.price">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="制造商" prop="manufacturer">
            <el-input
              v-model="formData.manufacturer"
              placeholder="请输入制造商"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>-->

        <!-- <el-col :span="12">
          <el-form-item label="是否重点物资" prop="hasObj">
            <el-switch
              :disabled="$route.query.isEdit"
              v-model="formData.hasObj"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </el-form-item>
        </el-col>-->
        <!-- <el-col :span="12">
          <el-form-item label="最高库存" prop="maxLimit">
            <el-input-number
              v-model="formData.maxLimit"
              placeholder="最高库存"
              :step="1"
              controls-position="right"
              :style="{ width: '100%' }"
            ></el-input-number>
          </el-form-item>
        </el-col>-->

        <el-col :span="12">
          <el-form-item label="是否启用" prop="effectStatus">
            <el-switch v-model="formData.effectStatus" active-value="1" inactive-value="0"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-col :span="24">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!$route.query.isInfo" type="primary" @click="submitForm">提交</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import store from "@/store";
import { goodsAdd, updategGoods, infoGoods } from "@/api/finance/goods.js";
import { validatPrices } from "@/utils/validate.js";
export default {
  name: "addMaterial",
  dicts: ["sys_goods_type", "sys_goods_spec", "sys_goods_unit"],

  components: {},
  props: [],
  data() {
    return {
      formData: {
        goodsNo: undefined,
        goodsName: undefined,
        typeValue: undefined,
        unit: undefined,
        spec: undefined,
        price: undefined,
        manufacturer: undefined,
        lowLimit: undefined,
        maxLimit: undefined,
        remark: undefined,
        currentInventory: undefined
      },
      rules: {
        goodsNo: [
          {
            required: true,
            message: "请输入单行文本用品编码",
            trigger: "blur"
          }
        ],
        goodsName: [
          {
            required: true,
            message: "请输入用品名称",
            trigger: "blur"
          }
        ],
        typeValue: [
          {
            required: true,
            message: "请选择用品分类",
            trigger: "change"
          }
        ],
        unit: [
          {
            required: true,
            message: "请输入单位",
            trigger: "blur"
          }
        ],
        spec: [
          {
            required: true,
            message: "请输入规格",
            trigger: "blur"
          }
        ],

        price: [
          {
            required: true,
            message: "请输入平均单价",
            trigger: "blur"
          },
          {
            min: 1,
            max: 99999999,
            validator: validatPrices,
            trigger: "change"
          }
        ],
        manufacturer: [
          {
            required: true,
            message: "请输入制造商",
            trigger: "blur"
          }
        ],
        currentInventory: [
          {
            required: true,
            message: "当前库存",
            trigger: "blur"
          }
        ],
        maxLimit: [
          {
            required: true,
            message: "最高库存",
            trigger: "blur"
          }
        ],
        remark: [
          {
            required: true,
            message: "请输入备注",
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {},
  watch: {},
  created() {
    if (this.$route.query.isEdit || this.$route.query.isInfo) {
      this.getinfo();
    }
  },
  mounted() {},
  methods: {
    getinfo() {
      infoGoods(this.$route.query.id).then(response => {
        this.formData = response.data;
      });
    },
    submitForm() {
      this.$refs["elForm"].validate(valid => {
        // TODO 提交表单
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          query.typeName = this.dict.type.sys_goods_type.find(
            i => i.value === query.typeValue
          ).label;
          if (this.formData.goodsId != undefined) {
            updategGoods(query).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            goodsAdd(query).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      const obj = { path: "./material" };
      this.$tab.closeOpenPage(obj);
    }
  }
};
</script>
